<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <link rel="stylesheet" type="text/css" href="estilos/estilo.css" />
        <script type="text/javascript" src="scripts/script1.js"></script>
        <script type="text/javascript" src="scripts/galleta.js"></script>
    </head>
    <body>
        <div id="completo">
            <div id="general">
            <div id ="logo"><img alt="banner" src="resources/banner.png"   /> </div>
            <div id="menu">
                <ul>
                    <li><span class="lista" onclick="muestraArticulos()" >Lista de artículos</span></li>
                    <li><span class="lista" onclick="muestraForm()">Mi carrito</span></li>
                </ul>
            </div>
            <input type="text" id="hora" size="7" disabled="true" />
            <hr id="linea"/>
            <select id="fondoColor" onchange="cambioColor(this.value);">
                <option value="azul">AZUL</option>
                <option value="rojo">ROJO</option>
                <option value="verde">VERDE</option>
                <option value="amarillo">AMARILLO</option>
            </select>
            <div id="formDatos">
                <form method="post">
                    <table>
                        <tr>
                            <td align="right">Nombre: </td>
                            <td><input name="nombre" pattern="[a-zA-z]{1,30}" id="nombre" type="text" size="30" /></td>
                            <td><label>Artículos Agregados:</label></td>
                        </tr>
                        <tr>
                            <td align="right">Apellido Paterno: </td>
                            <td><input name="aPaterno" pattern="[a-zA-z]{1,30}" id="aPaterno" type="text" size="30" /></td>
                            <td rowspan="7"><textarea rows="13" id="carrito" readonly="readonly"></textarea></td>
                        </tr>
                        <tr>
                            <td align="right">Apellido Materno: </td>
                            <td><input name="aMaterno" pattern="[a-zA-z]{1,30}" id="aMaterno" type="text" size="30" /></td>
                        </tr>
                        <tr>
                            <td align="right">Email: </td>
                            <td><input name="mail" pattern="[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}" id="mail" type="text" size="30" /></td>
                        </tr>
                        <tr>
                            <td align="right">Teléfono: </td>
                            <td><input name="telefono" pattern="[0-9]{10}"id="telefono" type="text" size="30" /></td>
                        </tr>
                        <tr>
                            <td align="right">Código Postal: </td>
                            <td><input name="cp" pattern="[0-9]{5}" id="cp" type="text" size="30" /></td>
                        </tr>
                        <tr>
                            <td colspan="2" align="right"><input type="submit" size="15" value="Guardar datos" onclick="guardaDatos(this.form)"/><input type="reset" size="15" value="Olvidarme" onclick="borrarDatos()" /></td>
                        </tr>
                    </table>
                </form>
            </div>
            <div id="formArticulos">
                <form>
                    <table class="orilla" >
                        <tr>
                            <th>Nombre del artículo</th>
                            <th>Precio</th>
                            <th>Cantidad</th>
                        </tr>
                        <tr>
                            <td id="Almendras" align="right" onmouseover="muestraImagen(this);" onmouseout="ocultaImagen(this);">
                                Almendras
                            </td>
                            <td>$15</td>
                            <td><input id="alm" name="almendras" class="elementoASumar" type="number" min="0" max="15" value="0" size="4"/></td>
                        </tr>
                        <tr>
                            <td id="Chocoretas" align="right" onmouseover="muestraImagen(this);" onmouseout="ocultaImagen(this);">
                                Chocoretas
                            </td>
                            <td>$5</td>
                            <td><input id="cho" name="chocoretas" class="elementoASumar" type="number" min="0" max="15" value="0" size="4"/></td>
                        </tr>
                        <tr>
                            <td id="Duvalin" align="right" class="articulo" onmouseover="muestraImagen(this);" onmouseout="ocultaImagen(this);">
                                Duvalín
                            </td>
                            <td>$7</td>
                            <td><input id="duv" name="duvalin" class="elementoASumar" type="number" min="0" max="7" value="0" size="4"/></td>
                        </tr>
                        <tr>
                            <td id="Bubulubu" align="right" class="articulo" onmouseover="muestraImagen(this);" onmouseout="ocultaImagen(this);">
                                Bubulubu
                            </td>
                            <td>$10</td>
                            <td><input id="bub" name="bubulubu" class="elementoASumar" type="number" min="0" max="10" value="0" size="4" /></td>
                        </tr>
                        <tr>
                            <td id="agregar" align="right"><input type="button" value="agregar al carrito" size="15" onmousedown="agregaCarrito(this.form);"/></td>
                            <td>Total</td>
                            <td><input id="total" type="text" value="$0" size="8" disabled="true"/></td>
                        </tr>
                    </table>
                    <table class="imagenArticulo">
                        <tr>
                            <td>
                                <img id="insertaImagen" />
                            </td>
                        </tr>
                    </table>
                </form>
            </div>
            </div>
        </div>
    </body>
</html>